<template>
    <div v-bind:style="{'background-color':pink , width:width,height:height+'px'}">
        <div v-bind:style="{backgroundColor: isBlue ? blue :'black', width:'50px',height:'20px'}"></div>
    <div v-bind:style="myDiv"></div>
    </div>
    
</template>
<script setup>
    import {ref,reactive} from 'vue'
    const isBlue = ref(false)
    const blue = ref('blue')
    const pink = ref('pink')
    const width = ref('100%')
    const height = ref(40)
    const myDiv = reactive({
        backgroundColor:'red',
        width:'50px',
        height:'20px'
    })

 </script>
<style>
</style>